<template>
  <view class="modal-overlay" v-if="visible" @click="handleOverlayClick">
    <view class="modal-content" @click.stop>
      <view class="modal-header">
        <text class="modal-title">确认收货</text>
        <text class="modal-close" @click="handleClose">×</text>
      </view>
      
      <view class="modal-body">
        <!-- 显示订单信息 -->
        <view class="order-info" v-if="props.orderInfo.orderNo">
          <text class="order-label">订单号：</text>
          <text class="order-value">{{ props.orderInfo.orderNo }}</text>
        </view>
        
        <view class="form-item">
          <view class="input-container">
            <input 
              class="card-input" 
              v-model="cardNumber" 
              placeholder="请输入卡号"
              maxlength="20"
              @input="handleCardInput"
            />
            <view class="scan-icon" @click="handleScanCode">
              <text class="iconfont icon-scan">📷</text>
            </view>
          </view>
        </view>
        
        <view class="form-item">
          <button 
            class="submit-btn" 
            :disabled="!cardNumber.trim()"
            @click="handleSubmit"
          >
            确认收货
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

// 定义 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  // 添加接收父组件传递的数据
  initialData: {
    type: Object,
    default: () => ({})
  },
  // 订单信息
  orderInfo: {
    type: Object,
    default: () => ({})
  },
  // 默认卡号
  defaultCardNumber: {
    type: String,
    default: ''
  }
})

// 定义 emits
const emit = defineEmits(['update:visible', 'submit', 'close'])

// 暴露方法给父组件调用
defineExpose({
  submit: handleSubmit,
  close: handleClose
})

// 响应式数据
const cardNumber = ref('')

// 监听 visible 变化，重置表单
watch(() => props.visible, (newVal) => {
  if (newVal) {
    // 弹窗打开时，设置默认卡号
    cardNumber.value = props.defaultCardNumber || ''
  } else {
    cardNumber.value = ''
  }
})

// 处理卡号输入
const handleCardInput = (e) => {
  cardNumber.value = e.detail.value
}

// 处理扫码
const handleScanCode = () => {
  // #ifdef APP-PLUS || MP-WEIXIN
  uni.scanCode({
    success: (res) => {
      console.log('扫码结果:', res)
      cardNumber.value = res.result
      uni.showToast({
        title: '扫码成功',
        icon: 'success'
      })
    },
    fail: (err) => {
      console.error('扫码失败:', err)
      uni.showToast({
        title: '扫码失败',
        icon: 'error'
      })
    }
  })
  // #endif
  
  // #ifdef H5
  uni.showToast({
    title: 'H5环境暂不支持扫码',
    icon: 'none'
  })
  // #endif
}

// 处理提交
const handleSubmit = () => {
  if (!cardNumber.value.trim()) {
    uni.showToast({
      title: '请输入卡号',
      icon: 'none'
    })
    return
  }
  
  emit('submit', {
    cardNumber: cardNumber.value.trim(),
    orderInfo: props.orderInfo,
    initialData: props.initialData
  })
  
  // 提交成功后关闭弹窗
  handleClose()
}

// 处理关闭
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

// 处理遮罩层点击
const handleOverlayClick = () => {
  handleClose()
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  background-color: #fff;
  border-radius: 12rpx;
  width: 80%;
  max-width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
  line-height: 1;
  padding: 10rpx;
}

.modal-body {
  padding: 30rpx;
}

.order-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
}

.order-label {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.order-value {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.form-item {
  margin-bottom: 30rpx;
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  background-color: #f8f8f8;
}

.card-input {
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  background-color: transparent;
}

.scan-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007aff;
  border-radius: 0 8rpx 8rpx 0;
}

.icon-scan {
  font-size: 32rpx;
  color: #fff;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.submit-btn:disabled {
  background-color: #ccc;
  color: #999;
}

.submit-btn:active {
  opacity: 0.8;
}
</style> 